<template>
  <div class="login-container">
    <div class="login-from-box">
      <el-form
        class="login-form"
        autocomplete="on"
        :model="loginForm"
        :rules="loginRules"
        ref="loginFormRef"
        label-position="left"
      >
        <h3 class="title">冀富通收银系统</h3>
        <el-form-item prop="diviceNo">
          <span class="svg-container svg-container_login">
            <svg-icon icon-class="user" />
          </span>
          <el-input
            name="diviceNo"
            type="text"
            onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"
            v-model="loginForm.diviceNo"
            autocomplete="on"
            placeholder="请输入激活码"
          />
        </el-form-item>
        <div class="login-btn">
          <el-button
            type="primary"
            :loading="loading"
            class="btn"
            @click="selectShop"
            >绑定</el-button
          >
        </div>
        <div class="xieyi" label="" prop="type">
          <el-checkbox-group v-model="loginForm.type">
            <el-checkbox
              label="我已阅读并同意"
              checked
              name="type"
            ></el-checkbox>
          </el-checkbox-group>
          <span class="ls" @click="agreement(1)">《服务协议》</span>

          <!-- <span class="ls" @click="agreement(2)">《隐私政策》</span> -->
        </div>
      </el-form>
    </div>
    <!-- 用户注册协议 -->
    <el-dialog
      title="用户协议"
      :visible.sync="dialogVisible"
      :modal="false"
      width="50%"
    >
      <div style="height: 400px" class="scrollbar">
        <el-scrollbar style="height: 100%">
          <p>用户协议</p>
          <p>
            本协议是您与本公司商城所有者之间就网站服务等相关事宜所订立的契约，请您仔细阅读本注册协议，您点击"同意并继续"按钮后，本协议即构成对双方有约束力的法律文件。
          </p>
          <p>第1条 本站服务条款的确认和接纳</p>
          <p>
            1.1本站的各项电子服务的所有权和运作权归本公司商城所有。用户同意所有注册协议条款并完成注册程序，才能成为本站的正式用户。用户确认：本协议条款是处理双方权利义务的契约，始终有效，法律另有强制性规定或双方另有特别约定的，依其规定。
          </p>
          <p>
            1.2用户点击同意本协议的，即视为用户确认自己具有享受本站服务、下单购物等相应的权利能力和行为能力，能够独立承担法律责任。
          </p>
          <p>
            1.3如果您在18周岁以下，您只能在父母或监护人的监护参与下才能使用本站。
          </p>
          <p>
            1.4本公司商城保留在中华人民共和国大陆地区法施行之法律允许的范围内独自决定拒绝服务、关闭用户账户、清除或编辑内容或取消订单的权利。
          </p>
          <p>第2条 本站服务</p>
          <p>
            2.1本公司商城通过互联网依法为用户提供互联网信息等服务，用户在完全同意本协议及本站规定的情况下，方有权使用本站的相关服务。
          </p>
          <p>2.2用户必须自行准备如下设备和承担如下开支：</p>
          <p>
            （1）上网设备，包括并不限于电脑或者其他上网终端、调制解调器及其他必备的上网装置；
          </p>
          <p>
            （2）上网开支，包括并不限于网络接入费、上网设备租用费、手机流量费等。
          </p>
          <p>第3条 用户信息</p>
          <p>
            3.1用户应自行诚信向本站提供注册资料，用户同意其提供的注册资料真实、准确、完整、合法有效，用户注册资料如有变动的，应及时更新其注册资料。如果用户提供的注册资料不合法、不真实、不准确、不详尽的，用户需承担因此引起的相应责任及后果，并且本公司商城保留终止用户使用本公司商城各项服务的权利。
          </p>
          <p>
            3.2用户在本站进行浏览、下单购物等活动时，涉及用户真实姓名/名称、通信地址、联系电话、电子邮箱等隐私信息的，本站将予以严格保密，除非得到用户的授权或法律另有规定，本站不会向外界披露用户隐私信息。
          </p>
          <p>
            3.3用户注册成功后，将产生用户名和密码等账户信息，您可以根据本站规定改变您的密码。用户应谨慎合理的保存、使用其用户名和密码。用户若发现任何非法使用用户账号或存在安全漏洞的情况，请立即通知本站并向公安机关报案。
          </p>
          <p>
            3.4用户同意，本公司商城拥有通过邮件、短信电话等形式，向在本站注册、购物用户、收货人发送订单信息、促销活动等告知信息的权利。
          </p>
          <p>
            3.5用户不得将在本站注册获得的账户借给他人使用，否则用户应承担由此产生的全部责任，并与实际使用人承担连带责任。
          </p>
          <p>
            3.6用户同意，本公司商城有权使用用户的注册信息、用户名、密码等信息，登录进入用户的注册账户，进行证据保全，包括但不限于公证、见证等。
          </p>
          <p>第4条 用户依法言行义务</p>
          <p>本协议依据国家相关法律法规规章制定，用户同意严格遵守以下义务：</p>
          <p>
            （1）不得传输或发表：煽动抗拒、破坏宪法和法律、行政法规实施的言论，煽动颠覆国家政权，推翻社会主义制度的言论，煽动分裂国家、破坏国家统一的的言论，煽动民族仇恨、民族歧视、破坏民族团结的言论；
          </p>
          <p>（2）从中国大陆向境外传输资料信息时必须符合中国有关法规；</p>
          <p>
            （3）不得利用本站从事洗钱、窃取商业秘密、窃取个人信息等违法犯罪活动；
          </p>
          <p>（4）不得干扰本站的正常运转，不得侵入本站及国家计算机信息系统；</p>
          <p>
            （5）不得传输或发表任何违法犯罪的、骚扰性的、中伤他人的、辱骂性的、恐吓性的、伤害性的、庸俗的，淫秽的、不文明的等信息资料；
          </p>
          <p>
            （6）不得传输或发表损害国家社会公共利益和涉及国家安全的信息资料或言论；
          </p>
          <p>（7）不得教唆他人从事本条所禁止的行为；</p>
          <p>（8）不得利用在本站注册的账户进行牟利性经营活动；</p>
          <p>
            （9）不得发布任何侵犯他人著作权、商标权等知识产权或合法权利的内容；
          </p>
          <p>用户应不时关注并遵守本站不时公布或修改的各类合法规则规定。</p>
          <p>
            本站保有删除站内各类不符合法律政策或不真实的信息内容而无须通知用户的权利。
          </p>
          <p>
            若用户未遵守以上规定的，本站有权作出独立判断并采取暂停或关闭用户帐号等措施。用户须对自己在网上的言论和行为承担法律责任。
          </p>
          <p>第5条 店铺义务</p>
          <p>
            5.1店铺经营者可通过本站申请店铺，发布全新或二手商品及/或服务信息并与其他用户达成交易，但必须保证商品信息真实。如有发现商品假冒或者其他违反国家法律规定的商品，本站有权对商品进行禁售。
          </p>
          <p>
            5.2若店铺经营者发生改变，店铺经营者需及时联系本站进行信息的变更，若未及时联系本站而导致消费者与原店铺经营者产生交易纠纷或者违法国家规定的事情，本站不负任何连带责任。
          </p>
          <p>
            5.3店铺经营者有权通过使用店铺设置短暂关停店铺，但店铺经营者应当对自己店铺关停前已达成的交易继续承担发货、退换货及质保维修、维权投诉处理等交易保障责任。
          </p>
          <p>
            5.4店铺经营者如有不实交易信息或者违反国家相关法律的行为，本站有权对店铺进行关停，并对关停期间所产生的损失不负任何责任。
          </p>
          <p>依据上述约定关停店铺均不会影响您已经累积的信用。</p>
          <p>第6条 商品信息</p>
          <p>
            本站上的商品价格、数量、是否有货等商品信息随时都有可能发生变动，本站不作特别通知。由于网站上商品信息的数量极其庞大，虽然本站会尽最大努力保证您所浏览商品信息的准确性，但由于众所周知的互联网技术因素等客观原因存在，本站网页显示的信息可能会有一定的滞后性或差错，对此情形您知悉并理解；本公司商城欢迎纠错，并会视情况给予纠错者一定的奖励。
          </p>
          <p>为表述便利，商品和服务简称为"商品"或"货物"。</p>
          <p>第7条 订单</p>
          <p>
            7.1在您下订单时，请您仔细确认所购商品的名称、价格、数量、规格、联系地址、电话、收货人等信息。收货人与用户本人不一致的，收货人的行为和意思表示视为用户的行为和意思表示，用户应对收货人的行为及意思表示的法律后果承担连带责任。
          </p>
          <p>
            7.2除法律另有强制性规定外，双方约定如下：本站上销售方展示的商品和价格等信息仅仅是要约邀请，您下单时须填写您希望购买的商品数量、价款及支付方式、收货人、联系方式、收货地址（合同履行地点）、合同履行方式等内容；系统生成的订单信息是计算机信息系统根据您填写的内容自动生成的数据，仅是您向销售方发出的合同要约；销售方收到您的订单信息后，只有在销售方将您在订单中订购的商品从仓库实际直接向您发出时（
            以商品出库为标志），方视为您与销售方之间就实际直接向您发出的商品建立了合同关系；如果您在一份订单里订购了多种商品并且销售方只给您发出了部分商品时，您与销售方之间仅就实际直接向您发出的商品建立了合同关系；只有在销售方实际直接向您发出了订单中订购的其他商品时，您和销售方之间就订单中该其他已实际直接向您发出的商品才成立合同关系。您可以随时登录您在本站注册的账户，查询您的订单状态。
          </p>
          <p>
            7.3由于市场变化及各种以合理商业努力难以控制的因素的影响，本站无法保证您提交的订单信息中希望购买的商品都会有货；如您拟购买的商品，发生缺货，您有权取消订单。
          </p>
          <p>第8条 配送</p>
          <p>
            8.1销售方将会把商品（货物）送到您所指定的收货地址，所有在本站上列出的送货时间为参考时间，参考时间的计算是根据库存状况、正常的处理过程和送货时间、送货地点的基础上估计得出的。
          </p>
          <p>
            8.2因如下情况造成订单延迟或无法配送等，销售方不承担延迟配送的责任：
          </p>
          <p>（1）用户提供的信息错误、地址不详细等原因导致的；</p>
          <p>（2）货物送达后无人签收，导致无法配送或延迟配送的；</p>
          <p>（3）情势变更因素导致的；</p>
          <p>（4）不可抗力因素导致的，例如：自然灾害、交通戒严、突发战争等。</p>
          <p>第9条 交易争议处理</p>
          <p>
            您在本公司商城平台交易过程中与其他用户发生争议的，您或其他用户中任何一方均有权选择以下途径解决：
          </p>
          <p>（1）与争议相对方自主协商；</p>
          <p>（2）使用本公司商城网站提供的争议调处服务；</p>
          <p>（3）请求消费者协会或者其他依法成立的调解组织调解；</p>
          <p>（4）向有关行政部门投诉；</p>
          <p>（5）根据与争议相对方达成的仲裁协议（如有）提请仲裁机构仲裁；</p>
          <p>（6）向人民法院提起诉讼。</p>
          <p>第10条 责任限制及不承诺担保</p>
          <p>
            10.1除非另有明确的书面说明,本站及其所包含的或以其它方式通过本站提供给您的全部信息、内容、材料、产品（包括软件）和服务，均是在"按现状"和"按现有"的基础上提供的。
          </p>
          <p>
            10.2除非另有明确的书面说明,本公司商城不对本站的运营及其包含在本网站上的信息、内容、材料、产品（包括软件）或服务作任何形式的、明示或默示的声明或担保（根据中华人民共和国法律另有规定的以外）。
          </p>
          <p>
            本公司商城不担保本站所包含的或以其它方式通过本站提供给您的全部信息、内容、材料、产品（包括软件）和服务、其服务器或从本站发出的电子信件、信息没有病毒或其他有害成分。
          </p>
          <p>
            如因不可抗力或其它本站无法控制的原因使本站销售系统崩溃或无法正常使用导致网上交易无法完成或丢失有关的信息、记录等，本公司商城会合理地尽力协助处理善后事宜。
          </p>
          <p>第11条 协议更新及用户关注义务</p>
          <p>
            根据国家法律法规变化及网站运营需要，本公司商城有权对本协议条款不时地进行修改，修改后的协议一旦被张贴在本站上即生效，并代替原来的协议。用户可随时登录查阅最新协议；用户有义务不时关注并阅读最新版的协议及网站公告。如用户不同意更新后的协议，可以且应立即停止接受本公司商城网站依据本协议提供的服务；如用户继续使用本网站提供的服务的，即视为同意更新后的协议。本公司商城建议您在使用本站之前阅读本协议及本站的公告。
            如果本协议中任何一条被视为废止、无效或因任何理由不可执行，该条应视为可分的且并不影响任何其余条款的有效性和可执行性。
          </p>
          <p>附则</p>
          <p>
            1本公司商城尊重用户和消费者的合法权利，本协议及本网站上发布的各类规则、声明等其他内容，均是为了更好的、更加便利的为用户和消费者提供服务。本站欢迎用户和社会各界提出意见和建议，本公司商城将虚心接受并适时修改本协议及本站上的各类规则。
          </p>
          <p>
            2本协议内容中以黑体、加粗、下划线、斜体等方式显著标识的条款，请用户着重阅读。
          </p>
          <p>
            3您点击本协议下方的"同意并注册"按钮即视为您完全接受本协议，在点击之前请您再次确认已知悉并完全理解本协议的全部内容。
          </p>
        </el-scrollbar>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 商户信息 -->
    <el-dialog
      title="商户信息"
      :visible.sync="dialogVisible2"
      :modal="false"
      width="50%"
    >
      <div class="mchdata" v-if="mchData != null">
        <div class="item">
          <div class="label">商户名称：</div>
          <div class="value">{{ mchData.mchName }}</div>
        </div>
        <div class="item">
          <div class="label">商户编号：</div>
          <div class="value">{{ mchData.mchNo }}</div>
        </div>
        <div class="item">
          <div class="label">商户联系人：</div>
          <div class="value">{{ mchData.contactName }}</div>
        </div>
        <div class="item">
          <div class="label">应用名称：</div>
          <div class="value">{{ mchData.appName }}</div>
        </div>
        <div class="item">
          <div class="label">应用编号：</div>
          <div class="value">{{ mchData.appId }}</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" :loading="loginLoad" @click="handleLogin"
          >确 定 绑 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script setup>
import { useUserStore } from "@/store/user";
import { ref, getCurrentInstance, onMounted } from "vue";
import { useRouter } from "@/hooks/use-router";
import { login, bindorNot, mch } from "../../api/login";
const store = useUserStore();
const { proxy } = getCurrentInstance();
const loginForm = ref({
  diviceNo: "",
  hostname: "",
  type: [],
});
const mchData = ref(null);
let dialogVisible = ref(false);
let dialogVisible1 = ref(false);
let dialogVisible2 = ref(false);
const loginFormRef = ref();
const loginLoad = ref(false);
const loginRules = ref({
  diviceNo: [{ required: true, trigger: "blur", message: "激活码不能为空" }],
  type: [
    {
      type: "array",
      required: true,
      message: "请同意用户注册协议",
      trigger: "change",
    },
  ],
});
const loading = ref(false);
const router = useRouter();

onMounted(() => {
  const os = require("os");
  const hostname = os.hostname(); //获取主机名称
  loginForm.value.hostname = hostname;
  //根据唯一标识查询是否绑定激活码，如果已经绑定跳转到主页面
  bindorNot(hostname)
    .then((res) => {
      let { data } = res.data;
      if (data.res == 0) {
        store.loginStore("", "");
        router.push({ path: "/" }).catch((err) => {});
      }
    })
    .catch((e) => {});
});

function agreement(type) {
  if (type == 1) {
    dialogVisible.value = true;
  } else {
    dialogVisible1.value = true;
  }
}

function selectShop() {
  loginFormRef.value.validate((valid) => {
    if (valid) {
      loading.value = true;
      mch(loginForm.value.diviceNo)
        .then((res) => {
          let { data } = res.data;
          if (data.res == -1) {
            proxy.$message.error(data.err);
            loading.value = false;
            return;
          } else {
            mchData.value = data.data;
            dialogVisible2.value = true;
          }
          loading.value = false;
        })
        .catch(() => {
          loading.value = false;
        });
    } else {
      console.log("error submit!!");
      return false;
    }
  });
}

function handleLogin() {
  login(loginForm.value.hostname, loginForm.value.diviceNo)
    .then((res) => {
      let { data } = res.data;
      loginLoad.value = true;
      if (data.res == -1) {
        proxy.$message.error(data.err);
        loginLoad.value = false;
        return;
      } else {
        store.loginStore(loginForm.value.hostname, loginForm.value.diviceNo);
        router.push({ path: "/" }).catch((err) => {});
      }
      loginLoad.value = false;
    })
    .catch(() => {});
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
$bg: #2d3a4b;
$light_gray: #eee;
$dark_gray: #889aa4;
$light_gray: #eee;

/* reset element-ui css */
.login-container {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-image: url("https://i.loli.net/2019/10/18/buDT4YS6zUMfHst.jpg");
  background-position: center;

  ::v-deep .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;

    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      height: 47px;

      &:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: #fff !important;
      }
    }
  }

  ::v-deep .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
  }

  .login-from-box {
    position: relative;

    .login-form {
      position: absolute;
      left: 0;
      right: 0;
      width: 520px;
      padding: 35px 35px 15px 35px;
      margin: 160px auto;
      align-items: center;
      color: white;
      backdrop-filter: saturate(180%) blur(20px);
      background: rgba(0, 0, 0, 0.65);
      border-radius: 10px;
      box-shadow: 0 0.4px 0.6px rgba(0, 0, 0, 0.141),
        0 1px 1.3px rgba(0, 0, 0, 0.202), 0 1.9px 2.5px rgba(0, 0, 0, 0.25),
        0 3.4px 4.5px rgba(0, 0, 0, 0.298), 0 6.3px 8.4px rgba(0, 0, 0, 0.359),
        0 15px 20px rgba(0, 0, 0, 0.26);

      .login-btn {
        .btn {
          position: relative;
          width: 100%;
          padding: 6px 0;
          margin: 10px 0 36px 0;
          font-size: 1.2em;
          color: white;
          background: transparent;
          border: 2px solid hsla(204, 70%, 53%, 1);
          outline: none;
          cursor: pointer;
          overflow: hidden;
          transition: 0.5s;

          &::before {
            position: absolute;
            content: "";
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
              120deg,
              transparent,
              hsla(204, 70%, 53%, 0.5),
              transparent
            );
            transform: translateX(-100%);
            transition: 0.5s;
          }

          &:hover {
            box-shadow: 0 0 20px 10px hsla(204, 70%, 53%, 0.5);
          }

          &:hover::before {
            transform: translateX(100%);
          }
        }
      }
    }

    .tips {
      font-size: 14px;
      color: #fff;
      margin-bottom: 10px;

      span {
        &:first-of-type {
          margin-right: 16px;
        }
      }
    }
    .xieyi {
      display: flex;
      .ls {
        font-size: 14px;
        cursor: pointer;
      }
    }

    .svg-container {
      padding: 6px 5px 6px 15px;
      color: $dark_gray;
      vertical-align: middle;
      width: 30px;
      display: inline-block;

      &_login {
        font-size: 20px;
      }
    }

    .title {
      font-size: 26px;
      font-weight: 400;
      color: $light_gray;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }

    .show-pwd {
      position: absolute;
      right: 10px;
      top: 7px;
      font-size: 16px;
      color: $dark_gray;
      cursor: pointer;
      user-select: none;
    }
  }
  .mchdata {
    .item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .label {
        width: 150px;
      }
    }
  }
}
</style>
